<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- HTML5文档头 -->
<!DOCTYPE html>
<!-- lang="zh-cn"，此网页基本是中文内容 -->
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--<link rel="shortcut icon" href=""/>-->
		<!-- 强大的CSS Reset库 -->
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<%@include file="/views/common/import.jspf"%>
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	</head>
	<body>
		<%@include file="/views/common/header.jspf" %>
		<section class=" container content">
			<div class="col-md-8">
				<ul class="clearfix" id="aticlePage">
				<!-- 先循环十条 -->
					<c:forEach items="${articlePage.list }" var="article" varStatus="v">
					<li class="list clearfix">
						<div class="list-icon ">
							<a href="<%=request.getContextPath()%>/blog/getBlog?userId=${article.userId}">
								<img src="${ctx}/static/${article.photo}" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${article.userName}
							</a>
						</div>
						<div class="list-tit">
							<h4><a href="<%=request.getContextPath()%>/blog/getArticle?id=${article.id}">${article.title }</a></h4>
						   <p>${fn:substring(article.content, 0, 20) }</p>
							<p class="item">
								<span class="glyphicon glyphicon-th-large"></span><span class="classify">${article.categoryName }</span>
								<span class="glyphicon glyphicon-time"></span><span class="introduce-time">${article.createTime }</span>
								<span class="glyphicon glyphicon-heart"></span><span class="read"><span class="read-more">${article.readTimes }</span></span>
							</p>
						</div>
					</li>
					</c:forEach>
					
				</ul>
			</div>
			<div class="col-md-4">
				<ul class="list-group">
					<li class="list-group-item active">阅读排行</li>
					<c:forEach items="${articleList }" var="article" varStatus="v">
						<li class="list-group-item">${v.count }、${fn:substring(article.title, 0, 10) }<span class="badge">${article.readTimes }</span></li>
					</c:forEach>
				</ul>
			</div>
		</section>
		<script>
		 var flag = true;
		    var pageNo = 2;
			var infinite=true;
			function formatDate(date, format) {   
			    if (!date) return;   
			    if (!format) format = "yyyy-MM-dd";   
			    switch(typeof date) {   
			        case "string":   
			            date = new Date(date.replace(/-/, "/"));   
			            break;   
			        case "number":   
			            date = new Date(date);   
			            break;   
			    }    
			    if (!date instanceof Date) return;   
			    var dict = {   
			        "yyyy": date.getFullYear(),   
			        "M": date.getMonth() + 1,   
			        "d": date.getDate(),   
			        "H": date.getHours(),   
			        "m": date.getMinutes(),   
			        "s": date.getSeconds(),   
			        "MM": ("" + (date.getMonth() + 101)).substr(1),   
			        "dd": ("" + (date.getDate() + 100)).substr(1),   
			        "HH": ("" + (date.getHours() + 100)).substr(1),   
			        "mm": ("" + (date.getMinutes() + 100)).substr(1),   
			        "ss": ("" + (date.getSeconds() + 100)).substr(1)   
			    };       
			    return format.replace(/(yyyy|MM?|dd?|HH?|ss?|mm?)/g, function() {   
			        return dict[arguments[0]];   
			    });                   
			}   
			  

		    $(window).scroll(function () {
		        var distance = $(document).height() - ($(window).scrollTop() + $(window).height());
		        if ((distance <= 50) && flag) {
		            flag = false;
		            $.post('<%=request.getContextPath()%>/blog/pageArticle?&pageNo=' + pageNo, function (page) {
		            	var data=page.list;
		                if (data.length == 0) {
		                	if(infinite){
		                	$('#aticlePage').append("<center> <b>Hello world 啥子都没得了!</b></center");
		                	}
		                	infinite=false;
		                    return;
		                }
		                var html = [];
		                for (var i = 0; i < data.length; i++) {
		                    var content = data[i].content;
		                    if (content.length > 300) {
		                        content = content.substring(0, 300) + '...';
		                    }
		                    var date =formatDate(new Date(data[i].createTime), "yyyy-MM-dd HH:mm:ss");
		                    html.push('<li class="list clearfix">');
		                    html.push('   <div class="list-icon ">');
		                    html.push('        <a href="<%=request.getContextPath()%>/blog/getBlog?userId='+data[i].userId+'">');
		                    html.push('          <img src="${ctx}/static/'+data[i].photo+'" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+data[i].userName);
		                    html.push('        </a>');
		                    html.push('      </div>');
		                    html.push('      <div class="list-tit">');
		                    html.push('         <h4><a href="<%=request.getContextPath()%>/blog/getArticle?id='+data[i].id+'">'+data[i].title+'</a></h4>');
		                    html.push('         <p>'+data[i].content.substr(0,20)+'</p>');
		                    html.push('         <p class="item">');
		                    html.push('          <span class="glyphicon glyphicon-th-large"></span><span class="classify">'+data[i].categoryName+'</span>');
		                    html.push('          <span class="glyphicon glyphicon-time"></span><span class="introduce-time">'+date +'</span>');
		                    html.push('          <span class="glyphicon glyphicon-heart"></span><span class="read"><span class="read-more">'+data[i].readTimes+'</span></span>');
		                    html.push('         </p>');
		                    html.push('	   </div>');
		                    html.push('</li>');
		                }
		                $('#aticlePage').append(html.join(''));

		                pageNo += 1;
		            },"json");
		        }
		        if (distance > 50) {
		            flag = true;
		        }
		    });
		</script>
	</body>

</html>